import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { Link } from 'react-router-dom';


// 模拟媒体报道数据
const mediaReports = [
  {
    id: 1,
    title: "豆豆Pay：打造中日跨境支付新生态",
    source: "日本经济新闻",
    date: "2025-08-10",
    summary: "豆豆Pay凭借其创新的跨境支付解决方案，正在改变中日两国企业和个人的资金流动方式，为双边贸易提供更便捷、高效的支付体验。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=cross-border%20payment%20service%2C%20financial%20technology%2C%20business%20news&sign=d95d265387c9a118fc14dd292464f526"
  },
  {
    id: 2,
    title: "专访豆豆Pay CEO：日本支付市场的创新者",
    source: "日经BP社",
    date: "2025-07-25",
    summary: "在专访中，豆豆Pay CEO详细阐述了公司在日本市场的发展战略，以及如何通过技术创新解决跨境支付痛点，服务中日两国用户。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=CEO%20interview%2C%20business%20magazine%2C%20payment%20industry&sign=830cf7a286c18443161d00967b839535"
  },
  {
    id: 3,
    title: "豆豆Pay与三菱UFJ银行达成战略合作",
    source: "朝日新闻",
    date: "2025-06-18",
    summary: "豆豆Pay宣布与日本三菱UFJ银行建立战略合作伙伴关系，双方将在跨境支付、金融科技等领域展开深度合作，共同开拓日本市场。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=bank%20partnership%2C%20signing%20ceremony%2C%20financial%20collaboration&sign=2e5811cb5efba5b16a69067bc7ac6992"
  },
  {
    id: 4,
    title: "豆豆Pay入选日本金融科技50强企业",
    source: "日本经济产业省",
    date: "2025-05-05",
    summary: "在日本经济产业省公布的年度金融科技企业评选中，豆豆Pay凭借其技术创新能力和市场表现，成功入选日本金融科技50强企业。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fintech%20award%2C%20company%20ranking%2C%20business%20achievement&sign=2106b5dead0490981e3e27b0110741e4"
  },
  {
    id: 5,
    title: "解析豆豆Pay的本地化战略：如何赢得日本市场",
    source: "日经金融",
    date: "2025-04-22",
    summary: "本文深入分析了豆豆Pay进入日本市场以来的本地化战略，从产品设计、合规运营到市场推广，探讨其成功赢得日本用户信任的关键因素。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=market%20strategy%2C%20business%20analysis%2C%20financial%20services&sign=7e726d339e940690149a7a691263ede6"
  }
];

export default function MediaReport() {
  const { t, i18n } = useTranslation();
  
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Header />
      <Helmet>s
        <title>{t('header.mediaCoverage')} - {t('seo.title')}</title>
        <meta name="description" content={t('news.mediaReportDesc')} />
        <meta property="og:title" content={`${t('header.mediaCoverage')} - ${t('seo.title')}`} />
        <meta property="og:locale" content={i18n.language === 'ja' ? 'ja_JP' : 'zh_CN'} />
      </Helmet>
      

      <main className="flex-grow">
         {/* 页面标题区域 */}
         <section className="py-16 md:py-24 bg-gradient-to-r from-blue-50 to-indigo-900">
           <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-white mb-6">
                {t('header.mediaCoverage')}
              </h1>
              <div className="w-20 h-1 bg-blue-400 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-blue-100 leading-relaxed">
                {t('news.mediaReportDesc')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 媒体报道列表 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="max-w-5xl mx-auto">
              {/* 媒体筛选 */}
              <div className="mb-12 flex flex-wrap justify-between items-center gap-4">
                <div>
                  <span className="text-gray-700 mr-4">{t('news.filterByMedia')}:</span>
                  <div className="inline-block relative">
                    <select className="appearance-none bg-gray-50 border border-gray-200 text-gray-700 py-2 px-4 pr-8 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500">
                      <option value="all">{t('news.allMedia')}</option>
                      <option value="newspaper">{t('news.newspaper')}</option>
                      <option value="magazine">{t('news.magazine')}</option>
                      <option value="online">{t('news.onlineMedia')}</option>
                      <option value="tv">{t('news.tvStation')}</option>
                    </select>
                    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                      <i className="fa-solid fa-chevron-down text-xs"></i>
                    </div>
                  </div>
                </div>
                
                <div className="relative">
                  <input
                    type="text"
                    placeholder={t('news.searchNews')}
                    className="bg-gray-50 border border-gray-200 text-gray-700 py-2 px-4 pl-10 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 w-full md:w-64"
                  />
                  <div className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                    <i className="fa-solid fa-search"></i>
                  </div>
                </div>
              </div>
              
              {/* 报道列表 */}
              <div className="space-y-12">
                {mediaReports.map((report) => (
                  <motion.article
                    key={report.id}
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: (report.id - 1) * 0.05 }}
                    viewport={{ once: true }}
                    className="group"
                  >
                    <div className="md:flex gap-8">
                      <div className="md:w-2/5 mb-6 md:mb-0 overflow-hidden rounded-xl">
                        <img 
                          src={report.imageUrl} 
                          alt={report.title} 
                          className="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-105"
                        />
                      </div>
                      <div className="md:flex-1">
                        <div className="flex flex-wrap items-center gap-4 mb-4">
                          <span className="text-sm font-medium text-gray-500">
                            {report.date}
                          </span>
                          <span className="px-3 py-1 bg-blue-50 text-blue-800 text-xs font-medium rounded-full">
                            {report.source}
                          </span>
                        </div>
                        <h3 className="text-2xl font-bold text-gray-900 mb-4 group-hover:text-gray-700 transition-colors">
                          {report.title}
                        </h3>
                        <p className="text-gray-600 mb-6 leading-relaxed">
                          {report.summary}
                        </p>
                        <a 
                          href="#" 
                          className="inline-flex items-center text-gray-900 font-medium hover:text-gray-700 transition-colors"
                        >
                          {t('news.readOriginal')}
                          <i className="fa-solid fa-external-link-alt ml-2 text-sm"></i>
                        </a>
                      </div>
                    </div>
                    {report.id !== mediaReports.length && (
                      <div className="mt-10 border-t border-gray-100"></div>
                    )}
                  </motion.article>
                ))}
              </div>
              
               {/* 加载更多 */}
               <div className="mt-16 flex justify-center">
                 <button className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium rounded-md transition-colors shadow-sm hover:shadow">
                   <i className="fa-solid fa-refresh mr-2"></i>
                   {t('investor.loadMore')}
                 </button>
               </div>
            </div>
          </div>
        </section>
     </main>
      <Footer />

    </div>
  );
}